<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span>
                <div class="fly">
                    <div class="changsha">{{$t('settleset')}}</div>
                    <span>
                        {{$t('setmethd')}}
                        <el-select v-model="auditData.settleType" :placeholder="$t('plsset')" size="mini" style="width: 100px" @change="sttypesel">
                            <el-option :label="'-' + $t('plsset') + '-'" value="null"></el-option>
                            <el-option label="T + 1" value="T02"></el-option>
                            <el-option :label="$t('daysettle')" value="T03"></el-option>
                            <el-option :label="$t('weeks')" value="T04"></el-option>
                            <el-option :label="$t('monthstate')" value="T05"></el-option>
                        </el-select>
                    </span>
                    <span v-if="auditData.settleType === 'T04'" >
                        {{$t('setldate')}}
                        <el-select v-model="auditData.settleDate" :placeholder="$t('plsset')" size="mini" style="width: 100px" @change="sttypesel">
                            <el-option :label="'-' + $t('plsset') + '-'" value="null"></el-option>
                            <el-option label="1" value="1"></el-option>
                            <el-option label="2" value="2"></el-option>
                            <el-option label="3" value="3"></el-option>
                            <el-option label="4" value="4"></el-option>
                            <el-option label="5" value="5"></el-option>
                            <el-option label="6" value="6"></el-option>
                            <el-option label="7" value="7"></el-option>
                        </el-select>
                    </span>
                    <span v-if="auditData.settleType === 'T05'" >
                        {{$t('setldate')}}
                        <el-select v-model="auditData.settleDate" :placeholder="$t('plsset')" size="mini" style="width: 100px" @change="sttypesel">
                            <el-option :label="'-' + $t('plsset') + '-'" value="null"></el-option>
                            <!-- <el-option label="1" value="1"></el-option>
                            <el-option label="2" value="2"></el-option>
                            <el-option label="3" value="3"></el-option>
                            <el-option label="4" value="4"></el-option> -->
                            <el-option label="5" value="5"></el-option>
                            <!-- <el-option label="6" value="6"></el-option>
                            <el-option label="7" value="7"></el-option>
                            <el-option label="8" value="8"></el-option>
                            <el-option label="9" value="9"></el-option> -->
                            <el-option label="10" value="10"></el-option>
                            <!-- <el-option label="11" value="11"></el-option>
                            <el-option label="12" value="12"></el-option>
                            <el-option label="13" value="13"></el-option>
                            <el-option label="14" value="14"></el-option> -->
                            <el-option label="15" value="15"></el-option>
                            <!-- <el-option label="16" value="16"></el-option>
                            <el-option label="17" value="17"></el-option>
                            <el-option label="18" value="18"></el-option>
                            <el-option label="19" value="19"></el-option>
                            <el-option label="20" value="20"></el-option>
                            <el-option label="21" value="21"></el-option>
                            <el-option label="22" value="22"></el-option>
                            <el-option label="23" value="23"></el-option>
                            <el-option label="24" value="24"></el-option> -->
                            <el-option label="25" value="25"></el-option>
                        </el-select>
                    </span>
                </div>
                <div class="fly">
                    <div class="changsha">{{$t('moneyset')}}</div>
                    <span>
                        {{$t('payrmethd')}}
                        <el-select v-model="auditData.settlePayType" :placeholder="$t('plsset')" size="mini" style="width: 100px" @change="sttypesel">
                            <el-option :label="'-' + $t('plsset') + '-'" value="null"></el-option>
                            <el-option :label="$t('automaticmon')" value="AUTO"></el-option>
                            <el-option :label="$t('manlpaymentsett')" value="MANUAL"></el-option>
                            <el-option :label="$t('selfhelpwith')" value="WITHDRAW"></el-option>
                        </el-select>
                    </span>
                </div>
            </span>
        </div>
        <div class="changsha">{{$t('product')}}</div>
        <!-- 内容区域 -->
        <el-table border style="width: 800px" ref="multipleTable" :data="proTab" @selection-change="handleSelectionChange">
            <el-table-column type="index" :label="$t('sernum')">
            </el-table-column>
            <el-table-column type="selection" :selectable='selectable'>
            </el-table-column>
            <el-table-column prop="productName" :label="$t('product')">
            </el-table-column>
            <el-table-column prop="rateValue" :label="$t('productrate')">
            </el-table-column>
            <el-table-column prop="rateType" :label="$t('rattyp')">
            </el-table-column>
            <el-table-column prop="remark" :label="$t('intro')">
            </el-table-column>
        </el-table>
        <el-button type="primary" :disabled="iscancoll" @click="toComplete" v-preventReClick>{{$t('configcomplete')}}</el-button>
    </div>
</template>

<script>
import {
    prolist,
    handleopenProduct
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            iscancoll: true,
            total: null,
            proTab: [],
            selPro: {
                merId: null,
                productCode: null,
                status: null,
                pageSize: 10,
                pageNum: 1
            },
            productForm: {
                productCode: null,
                rateType: null,
                rateValue: null,
                additionRateValue: null,
                takeEffectTime: null,
                loseEfficacyTime: null,
                applyTime: null,
                remark: null
            },
            auditData: {
                merId: null,
                settleType: null,
                settleDate: null,
                settlePayType: null,
                productReqVos: []
            },
            selproTab: []
        }
    },
    methods: {
        // 处理表格数据,禁止选中
        selectable(row, index) {
            if (row.productCode !== 'SDK_CONSUME') {
                return false
            } else {
                return true
            }
        },
        // 表格多选框默认选中
        toggleSelection (rows) {
                if (rows) {
                    this.$nextTick(() => {
                        rows.forEach(row => {
                            this.$refs.multipleTable.toggleRowSelection(row, true)
                        })
                    })
                } else {
                    this.$nextTick(() => {
                        this.$refs.multipleTable.clearSelection()
                    })
                }
        },
        getproList () {
            prolist(JSON.stringify(this.selPro)).then(res => {
                this.proTab = res.data.data.list
                this.proTab.forEach((item, index) => {
                    if (item.status === 'INVALID') item.status = this.$t('invlid')
                    if (item.status === 'VALID') item.status = this.$t('vlid')
                    if (item.productName === '结算打款') this.proTab.splice(index, 1)
                    if (item.productCode !== 'SDK_CONSUME') this.selproTab.push(item)
                })
                this.toggleSelection(this.selproTab)
                this.total = res.data.data.total
            })
        },
        handleSelectionChange(val) {
            this.auditData.productReqVos = []
            val.forEach(item => {
                delete item.extRateValue
                delete item.id
                delete item.parentCode
                // delete item.productName
                delete item.status
                delete item.sysCreateTime
                delete item.sysCreateUid
                delete item.sysModifiedTime
                delete item.sysModifiedUid
                item.additionRateValue = null
                item.takeEffectTime = null
                item.loseEfficacyTime = null
                item.applyTime = null
                item.remark = null
            })
            this.auditData.productReqVos = val
            if (this.auditData.productReqVos.length >= 1 && this.auditData.settleType && this.auditData.settlePayType) {
                this.iscancoll = false
            } else {
                this.iscancoll = true
            }
        },
        toComplete () {
            // this.auditData.auditStatus = 'SUCCESS'
            handleopenProduct(JSON.stringify(this.auditData)).then(res => {
                if (res.data.code === '000000') {
                    this.$message({
                        message: this.$t('configcomplete'),
                        type: 'success'
                    })
                    window.localStorage.removeItem('merid')
                    window.sessionStorage.removeItem('audito')
                    this.$router.push('/merApplyOrder/merAud')
                }
            })
        },
        sttypesel () {
            if (this.auditData.productReqVos.length >= 1 && this.auditData.settleType && this.auditData.settlePayType) {
                this.iscancoll = false
            } else {
                this.iscancoll = true
            }
        }
    },
    mounted () {
        this.getproList()
        // window.sessionStorage.getItem('audito')
        if (window.localStorage.getItem('merid')) this.auditData.merId = window.localStorage.getItem('merid')
    }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';

.fly {
    margin-bottom: 20px
}
.changsha {
    margin-bottom: 20px;
    font-weight: 700;
}
.seach {
    font-size: 12px;
    span {
        margin-left: 10px;
        .el-cascader {
            width: 300px;
            margin-left: 10px;
        }
    }
    .seachState {
        margin-left: 37px;
    }
    .el-button {
        width: 115px;
        height: 25px;
        line-height: 2px;
        font-size: 12px;
        margin-left: 31px;
    }
}
@{deep} .el-table {
        font-size: 12px;
        .el-table__header-wrapper {
            background-color: #F2F2F2 !important;
        }
    }
    @{deep} .el-table td, .el-table th {
        height: 40px;
        padding: 0 !important;
    }
    @{deep} .el-table th, .el-table tr {
        background-color: #F2F2F2 !important;
    }
    .el-link {
        font-size: 12px;
        margin-right: 15px;
    }
    @{deep} .el-table_1_column_5 {
        text-align: center;
    }
@{deep} .el-form-item__label {
    font-size: 12px;
}
.el-button {
    margin-top: 20px;
    width: 100px;
}
</style>
